<template>
  <el-popover
      slot="prepend"
      placement="bottom-start"
      title=""
      width="350"
      trigger="click"
  >
    <div style="height: 300px;overflow-y: scroll">
      <el-row>
        <el-col :span="24" style="padding-bottom: 16px">
          <el-checkbox
              v-model="allcheck"
              style="width: 150px;text-overflow:ellipsis"
              @change="checkedall"
          >
            {{$t('bs.isSelectAll')}}
          </el-checkbox>
        </el-col>
        <el-col v-for="(item,key) in techonlogyList" :key="item.id" :span="12" style="margin-bottom: 5px">
          <el-tooltip  :content="item.technology_name" placement="top-end">
            <el-checkbox
                v-model="item.checked"
                style="width: 150px;text-overflow:ellipsis"
                border
                @change="getSelectList"
            >
              {{ item.technology_name.substring(0,8) }}
            </el-checkbox>
          </el-tooltip>
        </el-col>
      </el-row>
    </div>
    <el-button v-bind="$attrs" size="mini" slot="reference">{{title}} ({{selectedList.length}}/{{techonlogyList.length}})</el-button>
  </el-popover>
</template>
<script>
import {getTechonlogyCat} from "@/api/technology";

export default {
  name: "technologySelect",
  props:{
    value:{
      type:Array,
      default:[],
    },
    title:{
      type:String,
      default:"工艺",
    },
  },
  data:()=>{
    return{
      allcheck:true,
      techonlogyList:[],
      selected_num:0,
      selectedList:[],
    }
  },
  mounted() {
    this.selectedList=this.value
    this.initData();
  },
  methods:{
    initData(){

      getTechonlogyCat().then((res) => {
          res.data.items.unshift({
            id:0,technology_name:"无工艺"
          })
        res.data.items.forEach((item) => {
          item.checked = true
        })

        this.techonlogyList = res.data.items
        this.getSelectList()
      })
    },
    checkedall(val){
      if(val){
        this.techonlogyList.map((item)=>{
          item.checked=true;
        })
      }else{
        this.techonlogyList.map((item)=>{
          item.checked=false;
        })
      }

      this.getSelectList();
    },
    changeGyItem(item){
      this.techonlogyList.forEach((it)=>{
        if(item.id==it.id)
        {
          it.checked=true;
        }else{
          it.checked=false;
        }
      })
      // this.doSearch();
      // item.checked=!item.checked;

      this.getSelectList()
    },
    getSelectList() {
      this.selectedList = this.techonlogyList.filter(item => item.checked === true)
      console.log("发送改变值",this.selectedList)
  //    this.value= this.selectedList;
      this.$emit("input",this.selectedList.map(item=>item.id))
    },

  }
}
</script>



<style scoped>

</style>
